<template>
  <div class="add">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/article' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改文章</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域添加 -->
    <el-card>
       <el-alert title="修改文章信息" type="info" center></el-alert>
      <!-- 步骤条 -->
       <el-steps :active="activeIndex" finish-status="success" align-center>
        <el-step title="步骤 1" icon="el-icon-edit"></el-step>
        <el-step title="步骤 2" icon="el-icon-s-promotion"></el-step>
        <el-step title="步骤 3" icon="el-icon-s-claim"></el-step>
      </el-steps>

      <!-- from表单 -->
      <el-form  :model="getData" :rules="rules" ref="ruleForm" label-width="80px">
        <!-- tab切换 -->
        <el-tabs tab-position="left" stretch @tab-click="handleTab" v-model="activeName">
          <el-tab-pane label="文章标题" name="1">
            <el-form-item label-width="auto" prop="title">
              <el-input placeholder="请输入文章标题" autosize type="textarea" v-model="getData.title"></el-input>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
              <el-button type="success" @click="handleOut" style="margin-top: 20px;">返回</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="文章简介" name="2">
            <el-form-item label-width="auto" prop="des">
              <el-input placeholder="请输入文章简介" autosize type="textarea" v-model="getData.des"></el-input>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
              <el-button type="success" @click="handleOut" style="margin-top: 20px;">返回</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="图片上传" name="3">
            <el-form-item label-width="auto">
              <el-upload
                action="http://47.107.156.169:3000/api/v1/img"
                :on-success="afterSuccess"
                multiple
                :limit="3">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
              <el-button type="success" @click="handleOut" style="margin-top: 20px;">返回</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="文章内容" name="4">
            <!-- 富文本编辑 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="getData.content"
              :options="editorOption"
              class="edit"
            />
            <!-- 提交数据 -->
            <el-button class="sumbit_button" type="primary" @click="handleEdit('ruleForm')">修改文章</el-button>
            <el-button type="success" @click="handleOut" style="margin-top: 20px;">返回</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 步骤条
      activeIndex: 0,
      // 富文本配置
      editorOption: {},
      // 文章数据
      getData: {},
      // 表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        des: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ]
      },
      // 当前tab页
      activeName: '1'
    }
  },
  created () {
    this.getEdit()
  },
  methods: {
    // tab切换
    handleTab (val) {
      this.activeIndex = Number(val.index)
    },
    // 获取单个id 数据
    async getEdit () {
      const id = this.$route.params.id // 获取到的id
      var { data: res } = await this.$http.get('/mores', {
        params: {
          id: id
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.getData = res.data[0]
    },
    // 提交数据
    handleEdit (val) {
      var id = this.$route.params.id // 获取到的id
      var obj = this.getData
      obj.id = id
      this.$refs[val].validate(async (is) => {
        if (!is) return this.$message.error('请填写完善')
        const { data: res } = await this.$http.put('/more', obj)
        if (res.meta.status !== 200) return this.$message.error('修改失败')
        // 提示修改成功
        this.$message.success('修改成功')
        // 清空表单
        this.$refs[val].resetFields()
        // 编程式导航到首页
        this.$router.push('/article')
      })
    },
    // tab切换 当前
    handlenext () {
      this.activeIndex = this.activeIndex + 1
      this.activeName = parseInt(this.activeName) + 1 + ''
    },
    // 返回
    handleOut () {
      this.$router.go(-1)
    },
    // 图片上传成功
    afterSuccess (res) {
      // 把连接给数据
      this.getData.img = res.url
    }
  }
}
</script>

<style lang="less" scoped>
.el-card{
  min-height: 600px;
}
.sumbit_button{
  margin-top: 100px;
}
.edit{
  height: 480px;
  min-height: 300px;
  img{max-width: 100%;}
}

</style>
